<template>
    <div class="head">
        您有需求，我就有办法——吉优选，您降本增效的最佳选择
    </div>
    <div class="box">
        <a-card style="width: 80%;">
            <div class="card_head">我们的优势</div>
            <div class="menu">
                <img src="../../public/imgs/吉优选/吉优选-首页_03.jpg" style="width: 80%; height: 100%;">
                <!--
            <a-card :title="screenKey[0]" style="width: 50%;height: 100%;">
                <template v-if="screenKey[0]" #extra><a href="#">more</a></template></a-card>
=======
<div class="head">
    您有需求，我就有办法——吉优选，您降本增效的最佳选择
</div>
<div class="box">
    <a-card style="width: 80%;">
        <div class="menu">
            <a-card :title="screenKey[0]" style="width: 50%;height: 100%;border: 0;outline: none;">
                <template v-if="screenKey[0]" #extra><a href="#">more</a></template>
                <div>你好</div>
            </a-card>

            <div class="left">
                <a-card style="width: 100%; height: 100%; background-color: #F2F2F2;">
                    <a-menu
                        id="perchase"
                        v-model:openKeys="openKeys"
                        v-model:selectedKeys="selectedKeys"
                        :style="{width: '100%', 'font-size': '18px'}"
                        mode="inline"
                        :items="items"
                        @click="handleClick"
                    ></a-menu>
                </a-card>
            </div>
        </a-card>
    </div>
    <div class="exhibit">   
        <a-card style="width: 80%;">
            <div class="card_head">案例展示</div>
            <div class="shows">
                <button @click="toPreviousShows()"><</button>
                <a-card style="width: 20%; background-color: #F2F2F2;">
                    <template #cover>
                        <a><img :src="showcases[0].casePicture" style="width: 100%; height: 100%;" @click="jmpExample(showcases[0].caseId)"></a>
                        <div style="width: 100%; text-align: center; background-color:bisque;">{{ showcases[0].caseCode }}</div>
                    </template>
                </a-card>
            </div>>
            -->
            </div>
        </a-card>
    </div>
    <div class="post">
        <a-card style="width: 80%;">
            <div class="card_head">需求发布</div>
            <br>
            <div style="margin-left: 50px;">
                <a-space size=middle>
                    <a><img src="../../public/imgs/吉优选/吉优选-首页-按钮_03.jpg" @click="jmpPublish()"></a>
                    <a><img src="../../public/imgs/吉优选/吉优选-首页-按钮_05.jpg" @click="jmpTeam()"></a>
                </a-space>
            </div>  
            <br>
            <div class="steps">
                <a-card style="width: 20%; background-color: #F2F2F2;">
                <template #cover>
                    <img src="../../public/imgs/吉优选/吉优选-首页-icon_03_01.png" style="width: 100%;height: 100%;">
                </template>
                </a-card>
                <a-card style="width: 20%; background-color: #F2F2F2;">
                <template #cover>
                    <img src="../../public/imgs/吉优选/吉优选-首页_icon_05_01.png" style="width: 100%;height: 100%;">
                </template>
                </a-card>
                <a-card style="width: 20%; background-color: #F2F2F2;">
                <template #cover>
                    <img src="../../public/imgs/吉优选/吉优选-首页_icon_07_01.png" style="width: 100%;height: 100%;">
                </template>
                </a-card>
                <a-card style="width: 20%; background-color: #F2F2F2;">
                <template #cover>
                    <img src="../../public/imgs/吉优选/吉优选-首页_icon_09_01.png" style="width: 100%;height: 100%;">
                </template>
                </a-card>
            </div>
        </a-card>
    </div>
    <div class="exhibit">   
        <a-card style="width: 80%;">
            <div class="card_head">案例展示</div>
            <div class="shows">
                <!-- <div><span> < </span></div> -->
                <a-card style="width: 20%; background-color: #F2F2F2;">
                    <template #cover>
                        <a><img src="../../public/imgs/吉优选/吉优选-首页-图片_03.jpg" style="width: 100%; height: 100%;" @click="jmpExample()"></a>
                        <div style="width: 100%; text-align: center; background-color:bisque;">案例一</div>
                    </template>
                </a-card>
                <a-card style="width: 20%; background-color: #F2F2F2;">
                    <template #cover>
                        <a><img src="../../public/imgs/吉优选/吉优选-首页-图片_05.jpg" style="width: 100%; height: 100%;" @click="jmpExample()"></a>
                        <div style="width: 100%; text-align: center; background-color:bisque;">案例二</div>
                    </template>
                </a-card>
                <a-card style="width: 20%; background-color: #F2F2F2;">
                    <template #cover>
                        <a><img src="../../public/imgs/吉优选/吉优选-首页-图片_07.jpg" style="width: 100%; height: 100%;" @click="jmpExample()"></a>
                        <div style="width: 100%; text-align: center; background-color:bisque;">案例三</div>
                    </template>
                </a-card>
                <a-card style="width: 20%; background-color: #F2F2F2;">
                    <template #cover>
                        <a><img src="../../public/imgs/吉优选/吉优选-首页-图片_09.jpg" style="width: 100%; height: 100%;" @click="jmpExample()"></a>
                        <div style="width: 100%; text-align: center; background-color:bisque;">案例四</div>
                    </template>
                </a-card>
                <div>></div>
            </div>
        </a-card>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch, h } from 'vue'
/*
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue'
const selectedKeys = ref(['0'])
const openKeys = ref(['sub1'])
const selectedKeys1 = ref(['0'])
const openKeys1 = ref(['sub1'])
const screenKey = reactive([''])
function getItem(label, key, icon, children, type) {
  return {
    key,
    icon,
    children,
    label,
    type,
  };
}
let showcases = ref<Array<showcase>>([
    {
        caseCode:'案例一',
        casePicture:'../../public/imgs/吉优选/吉优选-首页-图片_03.jpg',
        caseId:'1'
    },
    {
        caseCode:'案例二',
        casePicture:'../../public/imgs/吉优选/吉优选-首页-图片_05.jpg',
        caseId:'2'
    },
    {
        caseCode:'案例三',
        casePicture:'../../public/imgs/吉优选/吉优选-首页-图片_07.jpg',
        caseId:'3'
    },
    {
        caseCode:'案例四',
        casePicture:'../../public/imgs/吉优选/吉优选-首页-图片_09.jpg',
        caseId:'4'
    }
])
//路由
import { useRouter } from 'vue-router'
const router = useRouter()
//跳转到发布页面
function jmpPublish(){
    router.push('/publish')
}
*/
//路由
import { useRouter } from 'vue-router';
const router = useRouter()
//跳转到发布页面
function jmpPublish(){
    router.push('/publish')
}
//跳转到团队合作页面
function jmpTeam(){

}
//跳转到案例页面
function jmpExample(){
    router.push({
        path: '/example',
        query: {
            //通过传id或可以起到类似id作用的值实现展示不同案例
            id: '100'
        }
    })
}
</script>

<style scoped>
.head{
    width: 80%;
    height: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: rgb(255, 100, 0);
    text-indent: 10px;
    opacity: 0.5;
    border-radius: 5px;
    margin-bottom: 10px;
    font-size: 25px;
    font-weight: bold;
}
.card_head{
    width: 80%;
    height: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: black;
    text-indent: 20px;
    opacity: 0.5;
    border-left-style: solid;
    border-left-width: 10px;
    border-left-color: rgb(255, 100, 0);
    border-radius: 5px;
    margin-bottom: 10px;
    font-size: 25px;
    font-weight: bold;
}
.box{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}
.post{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}
.exhibit{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.menu{
    position: relative;
    width: 100%;
    height: 400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.left{
    height: 100%;
    position: absolute;
    width: 25%;
    left: 0;
}
.right{
    height: 100%;
    position: absolute;
    width: 25%;
    right: 0;
}
.steps{
    width: 90%;
    height: 100%;
    margin: auto auto auto auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.steps span{
    color: orange;
    font-size: 40px;
}
.shows{
    width: 80%;
    height: 100%;
    margin: auto auto auto auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.shows button{
    background-color: white;
    color: orange;
    font-size: 40px;
    border: none;
}
</style>